<template>
	<el-row type="flex">
		<cl-date-picker
			v-model="dateVal"
			type="date"
			placeholder="选择日期"
			:picker-options="datePickerOptions"
			value-format="yyyy-MM-dd"
			@change="dateChange"
		/>
		<div class="plr-1">-</div>
		<el-time-select
			v-model="timeVal"
			:picker-options="timePickerOptions"
			ref="time"
			style="width: 150px"
			placeholder="选择时间"
			@change="timeChange"
		/>
	</el-row>
</template>
<script>
import dayjs from "dayjs";
export default {
	name: "cl-shop-datetime-picker",
	props: {
		value: String,
		// 事业部ID
		biz_id: {
			type: [Number, String]
		},
		// 门店ID
		dept_id: {
			type: [Number, String]
		},
		// date配置
		dateOptions: {
			type: Object,
			default: () => ({
				disabledDate(time) {
					return false;
					return time.getTime() <= new Date() - 24 * 60 * 60 * 1000;
				}
			})
		},
		date: {
			type: String,
			default: ""
		},
		time: {
			type: String,
			default: ""
		}
	},
	data() {
		return {
			datePickerOptions: this.dateOptions,
			timePickerOptions: {
				start: "00:00",
				step: "00:30",
				end: "23:30",
				minTime: "00:00"
			},
			dateVal: this.date,
			timeVal: this.time
		};
	},
	computed: {
		datetime() {
			return [this.dateVal, this.timeVal].filter(v => !!v).join(" ");
		},
		shop() {
			return this.shopList.find(v => v.dept_id == this.dept_id) || {};
		},
		shopList() {
			return this.getBizRefData(this.biz_id, "shop_childs");
		}
	},
	watch: {
		date(v) {
			this.dateVal = v;
		},
		time(v) {
			this.timeVal = v;
		},
		datetime(v) {
			this.$emit("input", v);
		},
		dateOptions: {
			deep: true,
			handler(v) {
				this.datePickerOptions = { ...v };
			}
		},
		dept_id() {
			// this.timeVal = "";
			this.setTimePickerOptions();
		}
	},
	created() {
		this.setMinTime(false);
		this.setTimePickerOptions();
	},
	methods: {
		dateChange(v) {
			this.timeVal = "";
			this.$emit("update:date", v);
			this.$emit("date-change", v);
			this.setMinTime(true);
		},
		timeChange(v) {
			this.$emit("update:time", v);
			this.$emit("time-change", v);
		},
		setTimePickerOptions() {
			let shop = this.shopList.find(v => v.dept_id == this.dept_id) || {};
			const { btime, etime } = shop;
			let date = dayjs().format("YYYY-MM-DD");
			// 营业开始时间
			let start = dayjs(date + " " + ("07:00"));
			console.log(start.minute(),'start')
			if (start.minute() != 0) {
				start = start.minute() > 30 ? start.add(1, "h").set("m", 0) : start.set("m", 30);
				console.log(start,'start')
			}

			// 营业结束时间
			let end = dayjs(date + " " + (etime || "23:30"));
			if (end.minute() != 0) {
				end = end.minute() > 30 ? end.add(1, "h").set("m", 0) : end.set("m", 30);
			}

			this.timePickerOptions.start = start.format("HH:mm");
			this.timePickerOptions.end = end.format("HH:mm");
		},
		setMinTime(focus = true) {
			const { dateVal } = this;

			if (!dateVal) return;

			let now = dayjs();
			let isAfter = dayjs(dateVal).isAfter(now, "day");
			let minTime = "00:00";
			if (!isAfter) {
				minTime = now.format("HH:mm");
			}
			this.timePickerOptions.minTime = minTime;
			if (!focus) return;
			this.$nextTick(() => {
				console.log(dateVal);
				this.$refs.time.focus();
			});
		}
	}
};
</script>
